<?php

$this->title = '图片文字识别';
?>
<!-- script src='https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js'></script -->
<?=  yii\web\View::registerJsFile("https://cdn.rawgit.com/naptha/tesseract.js/1.0.10/dist/tesseract.js", ['depends'=>['app\assets\AppAsset'] ]) ?>
<style type="text/css">
    .ocr_line {width: 100%;display:block;}
</style>

<div class="site-index">

    <div class="jumbotron">
        <h2><?= $this->title ?></h2>

        <p class="lead">You have successfully created your Yii-powered application.</p>
    </div>

    <div class="body-content">

        <div class="row">
            <div class='col-md-6'><img src="/img/ocr/F9BDD72CD0A0ED782CA6411A9ED0CAEE.png" id="img" width=400> </div>
            <div class='col-md-4' id="content"> </div>
            <div class="col-md-2" id="progress" style="height:300px;overFlow:auto;"></div>
        </div>

    </div>
</div>


<?php app\components\JsBlock::begin() ?>
<script>
    
        window.Tesseract = Tesseract.create({
            //workerPath: '/path/to/worker.js',
            langPath: 'https://cdn.rawgit.com/naptha/tessdata/gh-pages/3.02/chi_sim.traineddata.gz',
            corePath: 'https://cdn.rawgit.com/naptha/tesseract.js-core/0.1.0/index.js',
        });

        // if we know our image is of spanish words without the letter 'e':
         //"/img/ocr/1.jpg"; //$("#img").val();
        var myImage = $("#img").attr("src"); //"/img/ocr/ocr1.jpg";

        Tesseract.recognize(myImage, {
            lang: 'chi_sim',
            tessedit_char_blacklist: 'e'
        }).progress(function(pro) {
                console.log('progress',pro.status);
                $("#progress").append("<p>"+pro.status+"</p>");
          })
          .then(function(result){
                $("#content").append(result.html);
          })
            
       // Tesseract.recognize(myImage)
       // .progress(
       //     message => console.log(message)
       // )
       // .catch(
       //     err => console.error(err)
       // )
       // .then(
       //     result => console.log(result)
       // )
       // .finally(
       //     resultOrError => console.log(resultOrError)
       // )


</script>
<?php app\components\JsBlock::end() ?>
